// ==========================================================================
// .progress-indicator
//
// Includs a spinner and the ability to have specific progress-indicator__percentages using the
// same elements.
//
// Check out this demo to understand how this works:
// http://codepen.io/MichaelArestad/pen/2740d550eaa89cef6c753316595298b7
// ==========================================================================


// Does progress-indicator__percentage math for the spinner
@function progress-indicator__percent($progress-indicator__percent) {
	@return ( 360 * $progress-indicator__percent / 200 );
}


// Global spinner settings
$progress-indicator__size: 20px;
$progress-indicator__transition-speed: .4s;


// Progress-indicator container
.progress-indicator {
	position: relative;
	width: $progress-indicator__size;
	height: $progress-indicator__size;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px darken( $gray, 10% );
	box-sizing: border-box;
}

// Progress indicator guts and magic
.progress-indicator__half {
	position: absolute;
		top: 0;
		left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transform-origin: 0% 50%;
	transform: translateZ(0);
	transition: all $progress-indicator__transition-speed ease-in-out;

	&:before {
		content: '';
		position: absolute;
			top: 0;
			right: 100%;
		width: 100%;
		height: 100%;
		border: 3px solid $blue-medium;
		border-right: 0;
		border-top-left-radius: 500px;
		border-bottom-left-radius: 500px;
		box-sizing: border-box;
		transform-origin: 100% 50%;
		transition: all $progress-indicator__transition-speed ease-in-out;
	}
}


// Example:

// .progress-indicator__half:before,
// .is-latter {
// 	[data-progress-indicator__percent="75"] & {
// 		transform: rotate(#{progress-indicator__percent(45)}deg);
// 	}
// }

.progress-indicator.is-inactive {
	visibility: hidden;
}

.progress-indicator.is-inactive {
	.progress-indicator__half,
	.progress-indicator__half:before {
		transition: none;
	}
}

.progress-indicator.is-in-progress {
	.progress-indicator__half:before,
	.is-latter {
		// transition: none;
		transform: rotate(#{progress-indicator__percent(90)}deg);
	}
	.progress-indicator__half,
	.progress-indicator__half:before {
		transition-duration: 5s;
		transition-timing-function: ease-out;
	}
}

// is complete
.progress-indicator.is-complete {
	background: $alert-green;
	box-shadow: none;
	color: $white;
	width: 28px;
	height: 28px;
	text-align: center;

	.gridicon {
		vertical-align: middle;
	}
}


// Animations for infinite spinner

// spins pieces of the circle
@keyframes progress-indicator__spin {
	100% {
		transform: rotate( 360deg );
	}
}

// spins the whole thing

@keyframes progress-indicator__fancy-spin {
	50% {
		transform: rotate( 360deg );
	}
	50.01% {
		transform: rotate( 540deg );
	}
	100% {
		transform: rotate( 900deg );
	}
}


$progress-indicator--spin-time: 3.4s;

.progress-indicator.is-processing {
	animation: progress-indicator__fancy-spin $progress-indicator--spin-time ease-in-out infinite;


	.progress-indicator__half,
	.progress-indicator__half:before {
		transform: none;
	}
	.progress-indicator__half:before,
	.progress-indicator__half.is-latter {
		animation: progress-indicator__spin $progress-indicator--spin-time ease-in-out infinite;
	}
}


// x styling
.progress-indicator__cancel.noticon:before { // TODO remove noticon
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: darken( $gray, 10% );
	text-align: center;
	line-height: $progress-indicator__size;
	text-decoration: none;
	z-index: z-index( 'progress-indicator-parent', '.progress-indicator__cancel.noticon:before' );
}


// smile styling
.progress-indicator .is-success,
.progress-indicator .is-problem {
	position: absolute;
	top: $progress-indicator__size/2 + 1;
	left: $progress-indicator__size/4;
	width: $progress-indicator__size/2;
	height: $progress-indicator__size/4;
	border-bottom-right-radius: 500px;
	border-bottom-left-radius: 500px;
	background: $blue-medium;
	z-index: z-index( 'progress-indicator-parent', '.progress-indicator .is-success' );

	&:before,
	&:after {
		content: '';
		position: absolute;
		top: -6px;
		left: 0;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: $blue-medium;
	}
	&:after {
		left: auto;
		right: 0;
	}
}

.progress-indicator {
	.is-success {
		animation: progress-indicator__appear .6s  ease-in-out;
	}
}

@keyframes progress-indicator__appear {
	0% {
		opacity: 0;
	}
	66% {
		opacity: 0;
	}
}

.progress-indicator .is-problem {
	background: darken( $gray, 10% );
	border: 0;
	border-top-right-radius: 500px;
	border-top-left-radius: 500px;

	&:before,
	&:after {
		background: darken( $gray, 10% );
	}
}
